<html>

<head>
  <!-- <title>OpenLayers Editor</title> -->
  <title>OpenLayers 编辑器</title>
  <link rel="stylesheet" type="text/css" href="style/ole.css" />
  <link rel="stylesheet" type="text/css" href="style/style.css" />
  <link rel="stylesheet" type="text/css" href="./libs/ol.css" />
  <meta charset="utf-8" />
</head>

<body>
  <script src="./libs/ol.js"></script>
  <script src="./libs/maplibre-gl.js"></script>
  <script src="./libs/jsts.min.js"></script>
  <script src="index.js"></script>
  <div id="app">
    <div id="header">
      <nav>
        <!-- <div id="brand">OpenLayers Editor</div> -->
        <div id="brand">OpenLayers 编辑器</div>
        <div id="links">
          <a href="#" class="active">Demo</a>
          <a href="api.html">API</a>
          <a target="_blank" href="https://gitee.com/rzcgis/openlayers-editor">
            <!-- Code -->
            代码
          </a>
        </div>
      </nav>
    </div>
    <div id="map"></div>
    <!-- <div id="promo">
      <a href="https://geops.com/en/career" target="_blank">
        <div id="promo-text">Join the team!</div>
      </a>
    </div> -->
    <div id="copyright">
      <a href="https://www.sbb.ch/" target="_blank">© SBB/CFF/FFS</a>|
      <a href="https://www.geops.ch/" target="_blank">© geOps Tiles</a>|
      <a href="https://www.openstreetmap.org/about/" target="_blank">
        © OpenStreetMap Contributors
      </a>
      <!-- |
      <a href="https://www.openmaptiles.org/" target="_blank">
        © OpenMapTiles
      </a> -->
      |
      <a href="https://geops.com/en/imprint" target="_blank" rel="noopener noreferrer">
        Imprint
      </a>
      |
      <a href="https://geops.com/en/privacy" target="_blank" rel="noopener noreferrer">
        Privacy
      </a>
      |
      <a href="https://geops.com/en" target="_blank" rel="noopener noreferrer">
        About geOps
      </a>
    </div>
  </div>
  <script type="text/javascript">
    var editLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        wrapX: false,
      }),
    });

    const tdtTK = "0ba18d232483c559f8e2b7ff059ff66e";
    const tileLayerBase = new ol.layer.Tile({
      source: new ol.source.OSM({
        url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',
      }),
    });
    var map = new ol.Map({
      layers: [tileLayerBase, editLayer],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform([108.95, 34.25], "EPSG:4326", "EPSG:3857"),
        zoom: 12,
      }),
      keyboardEventTarget: document,
    });

    var editor = new ole.Editor(map);

    var cad = new ole.control.CAD({
      source: editLayer.getSource(),
    });

    var draw = new ole.control.Draw({
      source: editLayer.getSource(),
    });

    var drawLine = new ole.control.Draw({
      type: 'LineString',
      source: editLayer.getSource(),
    });

    var rotate = new ole.control.Rotate({
      source: editLayer.getSource(),
    });

    var drawPoly = new ole.control.Draw({
      type: 'Polygon',
      source: editLayer.getSource(),
    });

    var drawCircle = new ole.control.Draw({
      type: 'Circle',
      source: editLayer.getSource(),
    });
    var drawSquare = new ole.control.Draw({
      type: 'Square',
      source: editLayer.getSource(),
    });
    var drawBox = new ole.control.Draw({
      type: 'Box',
      source: editLayer.getSource(),
    });
    var drawStar = new ole.control.Draw({
      type: 'Star',
      source: editLayer.getSource(),
    });

    var modify = new ole.control.Modify({
      source: editLayer.getSource(),
    });

    var buffer = new ole.control.Buffer({
      source: editLayer.getSource(),
    });

    var union = new ole.control.Union({
      source: editLayer.getSource(),
    });

    var intersection = new ole.control.Intersection({
      source: editLayer.getSource(),
    });

    var difference = new ole.control.Difference({
      source: editLayer.getSource(),
    });

    //军标
    // var drawPlotCircle = new ole.control.Draw({
    //   type: 'plot.Circle',
    //   source: editLayer.getSource(),
    // });
    // var drawPlotCurveFlag = new ole.control.Draw({
    //   type: 'plot.CurveFlag',
    //   source: editLayer.getSource(),
    // });
    // var drawPlotCurveFlag = new ole.control.Draw({
    //   type: 'plot.CurveFlag',
    //   source: editLayer.getSource(),
    // });
    // var drawPlotTextArea = new ole.control.Draw({
    //   type: 'plot.TextArea',
    //   source: editLayer.getSource(),
    // });
    let plots = [];
    for (const tp in ole.PlotTypes) {
      if (!tp.startsWith('Alias_')) {
        let plot = new ole.control.Draw({
          type: "plot:" + tp,
          source: editLayer.getSource(),
        });
        plots.push(plot);
      }
    }

    editor.addControls([
      draw,
      drawLine,
      drawPoly,
      drawCircle,
      drawSquare,
      drawBox,
      drawStar,
      modify,
      rotate,
      buffer,
      union,
      intersection,
      difference,
      //军标
      // drawPlotCircle,
      // drawPlotCurveFlag,
      // drawPlotTextArea,
      ...plots,      
      cad
    ]);

    var ls = new ole.service.LocalStorage();

    editor.addService(ls);
  </script>
</body>

</html>